<!--
* @description 音频播放
* @author zywu
* @date 2021/05/06 13:50:01
!-->
<template>
  <div class="d-flex ai-center audio-player" @click="playAudio">
    <span id="audio_area">
      <span class="audio_play_area">
        <i class="el-icon el-icon-video-play icon_audio_default"></i>
        <i class="el-icon el-icon-video-pause icon_audio_playing"></i>
      </span>
    </span>
    <div class="audio-player__track">
      <div id="audio_progress" class="audio-player__progress"></div>
    </div>
    <div id="audio_length" class="audio-player__length">00:00</div>
    <audio :src="url" id="media" width="1" height="1" preload></audio>
  </div>
</template>

<script>
import '@/libs/weixinAudio'

export default {
  props: {
    url: {
      type: String,
      default: '',
    },
  },
  components: {},

  data() {
    return {
      loaded: false,
    }
  },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    playAudio() {
      if (!this.audioInstance) {
        this.audioInstance = $(this.$el).weixinAudio({
          autoplay: false,
          src: this.url,
        })
        this.loaded = true
      }
    },
  },
}
</script>
<style lang='scss'>
.audio-player {
  .el-icon-video-pause {
    display: none;
  }
  .audio_play_area {
    float: none;
    margin: 0;
  }
  .el-icon {
    background: none;
    width: auto;
    height: auto;
    font-size: 40px;
    cursor: pointer;
    &:hover {
      color: rgba(68, 107, 222, 1);
    }
  }
  &__track {
    margin: 0 10px;
    flex: 1;
    position: relative;
    height: 12px;
    border-radius: 9px;
    background: #ecf0f5;
  }
  &__progress {
    width: 0;
    height: 12px;
    border-radius: 9px;
    background: #47cfad;
  }
}
</style>